<template>
  <div class="pagebody">
    <div class="pagehead borderbox flex-row align-center justify-center">
      <div class="justify-between align-center fz32">卡券信息</div>
    </div>
    <div class="information flex-col align-center">
      <div class="goodsthing flex-row borderbox">
        <img src="@/static/img/goods.jpg" alt="" />
        <div class="goodstext flex-col ml20 justify-center">
          <p class="fz24 fwbold">1000元礼品卡</p>
          <p class="fz20 color909399 mt20 mb16">
            市场价: <span class="fz20 colorF90000 fwbold">￥1000.00</span>
          </p>
          <p class="fz20 color909399">规格: 1000元面值</p>
        </div>
      </div>
      <van-button plain hairline type="primary" @click="toGoodsView"
        >查看详情</van-button
      >
    </div>
    <div class="related bgfff mt40 flex-col borderbox">
      <div class="title fz28 text-al-center">
        —————&emsp; 相关信息 &emsp;—————
      </div>
      <ul>
        <li class="justify-between">
          <span class="">提货码状态</span>
          <span>未提货</span>
        </li>
        <li class="justify-between">
          <span class="">卡券余额</span>
          <span>￥300.00</span>
        </li>
        <li class="justify-between">
          <span class="">提货号码</span>
          <span class="color909399">8880316</span>
        </li>
        <li class="justify-between">
          <span class="">起始时间</span>
          <span class="color909399">2022-11-01</span>
        </li>
        <li class="justify-between">
          <span class="">结束时间</span>
          <span class="color909399">2025-12-31</span>
        </li>
      </ul>
    </div>
    <div class="notice pos-rel borderbox bgfff mt15 flex-row align-center" @click="toNoticeView">
      <div class="imgbox"></div>
      <span class="fz20 ml30">关于卡券使用的相关须知</span>
      <img src="@/static/img/breadright.png" class="pos-abs right" />
    </div>
    <div class="pagefoot flex-row">
      <div class="left fz32 justify-center align-center" @click="toOrderView()">查询订单</div>
      <div class="right fz32 justify-center align-center">我要提货</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  components: {},
  data() {
    return {};
  },
  methods: {
    toGoodsView() {
      this.$router.push({ path: "/goods" });
    },
    toNoticeView() {
      this.$router.push({ path: "/notice" });
    },
    toOrderView() {
      this.$router.push({ path: "/order" });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .van-button {
  width: 5rem;
  border-radius: 0.5rem;
  color: red;
}
.van-button--primary {
  width: 5rem;
  border: 1px solid #ccc;
}
.van-button--hairline::after {
  border: none;
}
.pagebody {
  .pagehead {
    z-index: 9999;
    box-shadow: 0px -2px 18px 2px rgba(116, 116, 116, 0.16);
    position: sticky;
    top: 0;
    height: 1rem;
    background: #fff;
    padding: 0 0.24rem;
  }
  .information {
    background: #f5f5f5;
    .goodsthing {
      padding: 0.2rem;
      img {
        width: 2.5rem;
      }
      .goodstext {
        width: 3rem;
      }
    }
  }
  .related {
    padding: 0 0.46rem;
    .title {
      height: 1rem;
      line-height: 1rem;
    }
    ul {
      li {
        height: 0.8rem;
        line-height: 0.8rem;
        border-bottom: 1px solid #eeeeee;
        span {
          font-size: 0.24rem;
        }
      }
    }
  }
  .notice {
    margin-bottom: 1rem;
    height: 0.8rem;
    padding: 0 0.46rem;
    .imgbox {
      width: 1.6rem;
      background: url(@/static/img/notice.png) no-repeat 33px;
      background-size: 180%;
      display: inline-block;
      width: 115px;
      height: 30px;
      margin-left: -36px;
      animation: imgmove-data-v-eccf0012 1.5s ease-in-out;
    }
    .right {
      width: 0.1rem;
      right: 0.2rem;
    }
  }
  .pagefoot {
    box-shadow: 0px -2px 18px 2px rgba(116, 116, 116, 0.16);
    z-index: 66;
    height: 1rem;
    position: fixed;
    bottom: 0;
    background: #fff;
    width: -webkit-fill-available;
    .left {
      width: 50%;
      color: #0066cc;
    }
    .right {
      width: 50%;
      background: #f53033;
      color: #fff;
    }
  }
}
</style>